<script setup lang="ts">
import {reactive} from "vue";
import {ref} from 'vue'
import {type ComponentSize, ElMessage, type FormInstance, type FormRules} from 'element-plus'
import {passwordLoginApi} from "@/api/client/user.ts";
import {setClientToken} from "@/utils/token.ts";
import router from "@/router";
import {Lock, User} from "@element-plus/icons-vue";

interface PasswordLoginForm {
  phone: string
  password: string
}

const formSize = ref<ComponentSize>('large')
const passwordLoginFormRef = ref<FormInstance>()
const passwordLoginForm = reactive<PasswordLoginForm>({
  phone: '',
  password: ''
})

const rules = reactive<FormRules<PasswordLoginForm>>({
  phone: [
    {required: true, message: '请输入手机号', trigger: 'blur'},
    {pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {
      min: 6,
      max: 20,
      message: '密码长度必须在6到20位之间',
      trigger: 'blur'
    },
    {
      pattern: /^[a-zA-Z0-9]+$/,
      message: '密码只能包含数字、大小写字母',
      trigger: 'blur'
    }
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return
  }
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      try {
        const token = await passwordLoginApi(passwordLoginForm.phone, passwordLoginForm.password) as any
        setClientToken(token)
        await router.push('/client/home')
      } catch (e: any) {
        ElMessage.error(e)
      }
    } else {
      ElMessage.warning('请输入合法的手机号或密码')
    }
  })
}


async function redirectPasswordLogin() {
  await router.push('/client/sms-login')
}

</script>

<template>
  <div class="container">
    <el-card style="width: 400px">
      <template #header>
        <div class="card-header">
          <span>OJ判题系统</span>
        </div>
      </template>
      <el-form
          ref="passwordLoginFormRef"
          style="max-width: 600px"
          :model="passwordLoginForm"
          :rules="rules"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
      >
        <el-form-item prop="phone">
          <el-input
              v-model="passwordLoginForm.phone"
              style="width: 300px"
              placeholder="输入手机号"
              :prefix-icon="User"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              v-model="passwordLoginForm.password"
              style="width: 300px"
              placeholder="输入密码"
              type="password"
              show-password
              :prefix-icon="Lock"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(passwordLoginFormRef)">
            登录
          </el-button>
        </el-form-item>
      </el-form>
      <div class="other" @click="redirectPasswordLogin">
        <div>验证码登录</div>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.container {
  background-color: ghostwhite;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  :deep(.el-card) {
    .card-header {
      text-align: center;
      font-weight: bold;
      font-size: 20px;
    }

    .el-card__body {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;

      .other {
        width: 300px;
        display: flex;
        justify-content: flex-end;
        color: gray;
        margin-top: -10px;
      }

      .other:hover {
        cursor: pointer;
        color: skyblue;
      }
    }

    .el-form {
      .phone {
        width: 300px;
        display: flex;
      }

      .el-form-item:last-child {
        .el-button {
          width: 300px;
          background-color: #242528;
        }
      }
    }
  }
}
</style>